<template>
  <div class="JavaView">
    <NavBar></NavBar>
    <Banner page="JavaView" title="我的Java学习" discribtion="在这里，一切皆对象" />
    <!-- <h1>{{AAA}}</h1> -->
    <!-- <div>
      <el-table :data="AAA" style="width: 100%;margin-top:15px" :row-class-name="tableRowClassName">
        <el-table-column prop="createTime" label="创建日期" width="180">
        </el-table-column>
        <el-table-column prop="title" label="标题" width="280">
        </el-table-column>
        <el-table-column prop="description" label="内容描述">
        </el-table-column>
      </el-table>
    </div> -->
    <div>
      <p> </p>
    </div>

    <el-container id="java" class="animate__animated animate__fadeInUp">
      <el-row :gutter="12">
        <!-- <el-col :xs="24" :sm="17"> -->
        <el-col :xs="24" :sm="24">
          <el-card style="background-color: rgba(255,255,255,0.9)" class="left-item">
            <!-- 头部el-card__header -->
            <div slot="header" class="total">
              <div class="title">
                <!-- <i v-if="selected" class="el-icon-back" @click="updateBlogList"></i> -->
                <i v-if="selected" class="el-icon-back"></i>
                <span>{{selectMethod}}</span>
              </div>
              <span>共 <span style="color: #3a8ee6; font-size: 20px">{{totalcount}}</span> 篇</span>
            </div>
            <!-- 身体部分el-card__header -->
            <el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20" v-for="blog in AAA" :key="blog.id" shadow="never" class="animate__animated animate__fadeInUp blog-content">
              <el-col class="img" :xs="24" :sm="8">
                <el-image lazy :src="blog.firstPicture"></el-image>
              </el-col>
              <el-col :xs="24" :sm="16">
                <!-- <div @click="getBlogInfo(blog.id)"> -->
                <div>
                  <h3>{{blog.title}}</h3>
                  <p class="description">{{blog.description}}</p>
                  <div class="blog-info">
                    <div class="user-info">
                      <el-avatar size="small" :src="blog.user.avatar"></el-avatar>
                      <a href="#" class="header">{{blog.user.nickname}}</a>
                    </div>
                    <div class="blog-date">
                      <i class="el-icon-date"></i>
                      <span>{{blog.createTime | dataFormat}}</span>
                    </div>
                    <div>
                      <i class="el-icon-view"></i>
                      <span>{{blog.views}}</span>
                    </div>
                    <div class="blog-type">
                      <el-tag effect="plain">java学习</el-tag>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <!-- 页码显示 -->
          <!-- <el-pagination :small="pagSmall" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="queryInfo.pagesize" :current-page="queryInfo.pagenum" :layout="pagLayout" :total="totalcount">
          </el-pagination> -->
        </el-col>
      </el-row>
    </el-container>

    <BackToTop></BackToTop>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import Banner from '@/components/Banner.vue';
import BackToTop from '@/components/BackToToTop.vue'

export default {
  name: 'JavaView',
  components: {
    Banner,
    NavBar,
    BackToTop
  },
  data() {
    return {
      AAA: [],
      selected: false,
      selectMethod: '全部博客',
      totalcount: 100,
    }
  },
  mounted() {
    // 获取Java博客列表
    this.getJavaBlogList()
  },
  methods: {
    // 法一P(按需导入)
    async getJavaBlogList() {
      const { data: resyyy } = await this.$http.get('/jsondata/JavaData.json')
      if (resyyy.status !== 0) return this.$message.error('获取用户详情数据失败! ')
      this.AAA = resyyy.data
      this.totalcount=resyyy.totalElements
    },
    // 法二(使用箭头符号)
    // getJavaBlogList(){
    //   this.$http.get('/jsondata/JavaData.json').then(resxxx=>{
    //    this.AAA = resxxx.data.data  //从后端获取数据
    //    console.log(this.AAA)
    //   })
    // },
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
  }
}
</script>


<style scoped lang="less">
/*  */
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
 /*  */

 /*  */
  .total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: larger;
    font-weight: bold;

    .title {
      display: flex;
      align-items: center;

      .el-icon-back {
        font-weight: bolder;
        color: #3a8ee6;
        margin-right: 10px;
      }

      .el-icon-back:hover {
        cursor: pointer;
      }
    }
  }

    .blog-content:hover {
    /*border-left: 5px solid #3a8ee6;*/
    /*border-right: 5px solid #3a8ee6;*/
    background-color: rgba(58, 142, 230, 0.3);
    cursor: pointer;

    .el-tag {
      color: white;
      background-color: #3a8ee6;
    }
  }

  .blog-content {
    padding: 10px;
    height: auto;
    border-bottom: 1px solid rgb(199, 163, 92);
    /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
    transition: .3s;


    .el-image {
      border-radius: 5px;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    .blog-info {
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, .4);
      font-size: 10px;

      .user-info {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-right: 15px;

        .el-avatar {
          margin-right: 5px;
          width: 22px;
          height: 22px;
        }

        .header {
          text-decoration: none;
          color: #3a8ee6;
          font-weight: bold;
        }
      }

      .blog-date {
        margin-right: 15px;
      }

      .blog-type {
        margin-left: auto;
      }
    }
  }
  .description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  }
 /*  */
</style>